<template>
    <ul><li v-for="item in dataList" :key="item.id">{{item.name}}</li></ul>
</template>

<script>
    export default {
        name: "News",
        data: function () {
            return {
                dataList: [],
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            this.axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.dataList = res.data.data.result;
            })
        }
    }
</script>

<style scoped>

</style>